<template>
    <div class="hospital-filter">
        <van-dropdown-menu>
            <van-dropdown-item v-model="area" :options="areaOptions" title="区域" @change="emitChange" />
            <van-dropdown-item v-model="level" :options="levelOptions" title="医院等级" @change="emitChange" />
            <van-dropdown-item v-model="sort" :options="sortOptions" title="综合排序" @change="emitChange" />
        </van-dropdown-menu>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

const emit = defineEmits(['filter-change'])

const area = ref('')
const level = ref('')
const sort = ref('comprehensive')

const areaOptions = [
    { text: '全部区域', value: '' },
    { text: '海淀区', value: '海淀区' },
    { text: '朝阳区', value: '朝阳区' },
    { text: '西城区', value: '西城区' },
    { text: '东城区', value: '东城区' }
]

const levelOptions = [
    { text: '全部等级', value: '' },
    { text: '三甲', value: '三甲' },
    { text: '三乙', value: '三乙' },
    { text: '二甲', value: '二甲' },
    { text: '二乙', value: '二乙' }
]

const sortOptions = [
    { text: '综合排序', value: 'comprehensive' },
    { text: '距离优先', value: 'distance' },
    { text: '评分优先', value: 'rating' }
]

// 获取当前筛选条件
const getFilterParams = () => {
    return {
        area: area.value,
        level: level.value,
        sort: sort.value
    }
}

// 发射筛选变化事件
const emitChange = () => {
    emit('filter-change', getFilterParams())
}

// 向父组件暴露筛选条件和方法
defineExpose({
    area,
    level,
    sort,
    getFilterParams
})
</script>

<style scoped lang="scss">
.hospital-filter {
    position: sticky;
    top: 46px;
    z-index: 10;
    background: #fff;
}
</style>